<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="24" type="flex">
        <el-col :span="10" class="loans-box">
          <NewCard :title="`${ruleName()}的阿米巴预算`" :isright="true">
            <template slot="right">
              <p class="fohf-p" v-if="$store.state.user.budgetService.accountStr">专户代码：{{$store.state.user.budgetService.accountStr}}</p> 
            </template>
            <template>
              <!-- 阿米巴预算页面 -->
              <TryOut v-if="isBuy"></TryOut>
              <!-- 付费或者试用页面 -->
              <Default v-else @goPayOrTrial="goPayOrTrial" :type='0'></Default>
            </template>
          </NewCard>
        </el-col>
        <el-col :span="14" class="loans-box">
          <!-- 推荐内容 -->
          <FeaturedContent v-if="currentNum == 0"></FeaturedContent>
          <!-- 这里本来是收银台，已经移走 -->
          <!-- 阿米巴预算的页面 -->
          <RightTryOut
            v-else-if="currentNum == 2"
            :isGoPay="isGoPay"
            :isTr="isTrial"
          ></RightTryOut>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import FeaturedContent from "@/components/FeaturedContent/index.vue";
import Default from "@/BMViews/views/tool/budget/components/default.vue";
import TryOut from "@/BMViews/views/tool/budget/components/tryOut/index.vue";
import RightTryOut from "@/BMViews/views/tool/budget/components/rightTryOut/index.vue";

export default {
  name: "budget",
  components: {
    NewCard,
    FeaturedContent,
    Default,
    TryOut,
    RightTryOut
  },
  data() {
    return {
      isBuy: false, //当前是否购买
      currentNum: 0, //0推荐内容 1收银台 2阿米巴预算的页面

      isGoPay: false, //是否去收银台
      isTrial: false //是否是试用
    };
  },
  mounted() {
    // 跳转推荐内容
    this.$bus.$on("goBudgetFeat", () => {
      this.currentNum = 0;
    });

    // 跳转阿米巴预算的页面
    this.$bus.$on("goBudgetRight", () => {
      this.isBuy = true;
      this.currentNum = 2;
    });
  },
  beforeDestroy() {
    // 销毁
    this.$bus.$off("goBudgetFeat");
    this.$bus.$off("goBudgetPay");
    this.$bus.$off("goBudgetRight");
  },
  watch: {
    "$store.state.user.budgetRole": {
      handler() {
        this.getUserBuy(); // 判断当前用户的是否购买阿米巴预算
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 打开收银台
    goPayOrTrial(isGoPay, isTrial) {
      this.isGoPay = isGoPay;
      this.isTrial = isTrial;
      this.currentNum = 2;
    },

    // 判断当前用户的是否购买阿米巴预算
    getUserBuy() {
      if (this.$store.state.user.budgetRole.id) {
        this.isBuy = true;
        this.currentNum = 2; //阿米巴页面
      } else {
        this.isBuy = false;
        this.currentNum = 0; //推荐页
      }
    },

    // 过滤名字
    ruleName() {
      // let reg = new RegExp("的问圈", "g");
      let name = this.$store.state.user.userInfo.whereCircle;
      // let rulName = name.replace(reg, "");
      let rulName = name + '的圈子'
      console.log("name:", name);
      return rulName;
    }
  }
};
</script>

<style lang="scss" scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
// 固定高度滚动
::v-deep .label-box-content .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
// 滚动藏滚动条
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}

.fohf-p{
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #666;
}
</style>
